<!DOCTYPE html>
<html lang="zh" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<base href="http://pages.linesno.com/" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title>工作流数据统计</title>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
	<link href="css/style.css" rel="stylesheet"/>
    <style type="text/css">
        .echarts {
            height: 400px;
        }
        li{
            list-style: none;
            float: left;
            margin-left: 20px;
        }
        button.dim{
            margin-bottom: 0px !important;
        }
    </style>
</head>
<body class="gray-bg">
	
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>网站访问量统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" style="height:200px" id="echarts-line-chart"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>渠道来源状态</h5>
                        <div class="ibox-tools">
                            <ul>
                                <li>
                                    <button class="btn btn-primary dim" type="button"></button>正常
                                </li>
                                <li>
                                    <button class="btn btn-danger  dim " type="button"></button>异常
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th align="center" width="60px" scope="col">序号</th>
                                    <th scope="col">监控项</th>
                                    <th align="center" width="60px" scope="col">状态</th>
                                    <th width="60px">操作</th>
                                </tr>
                            </thead>
                            <tbody id="headth-list">
                                <tr>
                                    <td>1</td>
                                    <td>网厅业务</td>
                                    <td width="60px">
                                        <button class="btn btn-danger  dim " type="button"></button>
                                    </td>
                                    <td width="60px">
                                        <a href="javascript:showJtYw('网厅业务','wt')">查看</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>微信业务</td>
                                    <td width="60px">
                                        <button class="btn btn-primary dim" type="button"></button>
                                    </td>
                                    <td width="60px">
                                        <a href="javascript:showJtYw('微信业务','wx')">查看</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>支付宝业务</td>
                                    <td width="60px">
                                        <button class="btn btn-primary dim" type="button"></button>
                                    </td>
                                    <td width="60px">
                                        <a href="javascript:showJtYw('支付宝业务','zfb')">查看</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>爱业务</td>
                                    <td width="60px">
                                        <button class="btn btn-primary dim" type="button"></button>
                                    </td>
                                    <td width="60px">
                                        <a href="javascript:showJtYw('爱业务','ann')">查看</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>114业务</td>
                                    <td width="60px">
                                        <button class="btn btn-primary dim" type="button"></button>
                                    </td>
                                    <td width="60px">
                                        <a href="javascript:showJtYw('114业务','114')">查看</a>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th scope="col">序号</th>
                                    <th scope="col">监控项</th>
                                    <th scope="col">状态</th>
                                    <th width="60px">操作</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>业务量统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echarts-pie-chart"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>

	<script src="js/jquery.min.js"></script>
    <script src="/ajax/libs/report/echarts/echarts-all.js"></script>
    <script type="text/javascript">
        var pieChart = echarts.init(document.getElementById("echarts-pie-chart")); // 饼图统计

        $(function(){

            // ------------------------------------------- 访问量统计 start --------------------------------
            var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
	        var lineoption = {
	            title : {
	                text: '一月内访问量变量'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['最高访问量','最低访问量']
	            },
	            grid:{
	                x:40,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    boundaryGap : false,
                        data : [
                            '1','2','3','4','5','6','7',
                            '8','9','10','11','12','13','14' ,
                            '15','16','17','18','19','20','21' ,
                            '22','23','24','26','27','28','29','30','31'
                        ]
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value',
	                    axisLabel : {
	                        formatter: '{value} 次'
	                    }
	                }
	            ],
	            series : [
	                {
	                    name:'最高访问量',
	                    type:'line',
                        data:[
                            11, 11, 15, 13, 42, 13, 10 ,
                            14, 13, 35, 23, 32, 23, 30 ,
                            18, 17, 25, 33, 22, 33, 20 ,
                            10, 19, 55, 13, 12, 43, 50,90,9
                        ],
	                    markPoint : {
	                        data : [
	                            {type : 'max', name: '最大值'},
	                            {type : 'min', name: '最小值'}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name: '平均值'}
	                        ]
	                    }
	                },
	                {
	                    name:'最低访问量',
	                    type:'line',
	                    data:[1, -2, 2, 5, 3, 2, 0],
	                    markPoint : {
	                        data : [
	                            {name : '月最低', value : -2, xAxis: 1, yAxis: -1.5}
	                        ]
	                    },
	                    markLine : {
	                        data : [
	                            {type : 'average', name : '平均值'}
	                        ]
	                    }
	                }
	            ]
	        };
	        lineChart.setOption(lineoption);
            $(window).resize(lineChart.resize);
            // ------------------------------------------- 访问量统计 end --------------------------------

            // ------------------------------------------- 业务量统计 start --------------------------------
            // ajax 请求返回数据
            var leData = [
                    '网厅业务',
                    '微信业务',
                    '支付宝业务',
                    '爱业务',
                    '114业务'
                ] ;
            var seData = [
                    {value:335,total:21231.7, name:'网厅业务'},
                    {value:310,total:21231.7, name:'微信业务'},
                    {value:234, total:21231.7,name:'支付宝业务'},
                    {value:135,total:21231.7, name:'爱业务'},
                    {value:1548,total:21231.7, name:'114业务'}
                ] ;
            showYw('工作流业务量统计' , leData , seData) ;
	        // $(window).resize(pieChart.resize);
            // ------------------------------------------- 业务量统计 end --------------------------------

        }) ;

        // 标题,业务统计类型
        function showJtYw(_title , _type){
            // 从ajax中获取
            var leData = [
                    '提取',
                    '汇缴',
                    '贷款预受理',
                    '114业务'
                ] ;
            var seData = [
                    {value:935, total:21231.7, name:'提取'},
                    {value:210, total:21231.7, name:'汇缴'},
                    {value:634, total:21231.7, name:'贷款预受理'},
                    {value:148, total:21231.7, name:'114业务'}
                ] ;
            pieChart.clear() ; // 清理缓存
            showYw(_title , leData , seData) ;
        }

        function showYw(_title , _leData , _seData){
	        var pieoption = {
	            title : {
                    text: _title ,
	                subtext: '纯属虚构',
	                x:'center'
	            },
	            tooltip : {
	                trigger: 'item',
	                formatter: function(params){
						console.log("params = " + params) ; 
						var total = _seData[params.dataIndex].total ; 
						
						return params[0]+"(" + params[3]+ "%)<br/>笔数:"+params[2]+"  <br/> 金额:"+total+"元" 
					}  
	            },
	            legend: {
	                orient : 'vertical',
	                x : 'left',
                    data:_leData
	            },
	            calculable : true,
	            series : [
	                {
	                    name:'数据统计',
	                    type:'pie',
	                    radius : '55%',
	                    center: ['50%', '60%'],
	                    data:_seData
	                }
	            ]
	        };
	        pieChart.setOption(pieoption);
	        $(window).resize(pieChart.resize);
        }
    </script>

</body>
</html>
